import React, { useState } from 'react';
import echarts from 'echarts';
import s from './chart1.module.css';
import { datetime } from '@/common/formatter';
import EmptyData from '@/components/EmptyData';

export default function chart1({ data }) {
  React.useMemo(() => {}, [data]);
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line',
      },
      formatter([{ data, seriesName }]) {
        return `<div>
                    <div style="display: flex; ">
                      <div style="width: 0rem;">${data[0].split(' ')[0]}</div>
                    </div>
                    <div style="display: flex;">
                      <div>告警</div>
                      <div style="width: 0rem;">${data[1]}次</div>
                    </div>
									</div>`;
      },
      backgroundColor: '#fff',
      textStyle: '#696C78',
      extraCssText: 'width: 6rem;color: #000;line-height:1rem;margin: 0 auto;border: 1px solid #f7f9fc;box-shadow: 0 1px #f7f9fc;',
    },
    axisPointer: {
      show: true,
      lineStyle: {
        width: 2,
        type: 'dotted',
        color: '#fbc86d',
      },
    },
    grid: {
      left: '50',
      right: '50',
      top: '10',
      bottom: '40',
    },
    xAxis: {
      type: 'time',
      boundaryGap: false,
      splitNumber: 7,
      splitLine: { show: false},
      axisLine: { lineStyle: { color: '#000' }, show: false },
      axisTick: {
        show: false,
      },
      interval: 24 * 60 * 60 * 1000,
      axisLabel: {
        formatter(value) {
          return datetime(value, 'yyyy/MM/dd');
        },
        backgroundColor: 'transparent',
        margin: 20,
        align: 'center',
      },
    },
    yAxis: {
      type: 'value',
      boundaryGap: false,
      axisTick: {
        show: false,
      },
      axisPointer: {
        type: 'line',
        label: {
          show: false,
        },
      },
      splitLine: { lineStyle: { color: '#cbd1da', type: 'dashed' } },
      axisLine: { lineStyle: { color: '#000' }, show: false },
    },
    series: [
      {
        data: [
          ['2022-01-06', 1],
          ['2022-01-07', 3],
          ['2022-01-10', 3],
        ],
        name: '全部',
        type: 'line',
        smooth: true,
        smoothMonotone: 'x',
        showSymbol: false,
        lineStyle: {
          color: '#FAAF2C',
          width: 2,
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(255, 165, 78, 0.4977)',
            },
            {
              offset: 1,
              color: 'rgba(249, 222, 105, 0.08)',
            },
          ]),
        },
      },
    ],
  };
  
  React.useEffect(async () => {
    if (!data) {
      return false;
    }
    const lines = data.map((e) => {
      const [[date, count]] = Object.entries(e);
      return [datetime(date), count];
    });

    const chart1 = echarts.init(document.getElementById('chart1'));
    option.series[0].data = lines;
    chart1.setOption(option, true);
    chart1.resize();
    window.onresize=() => {
      chart1.resize();
    }
  }, [data]);
  return (
    <div className={s.chart1}>
      <div className={s.chartTitles}>
        <span className={s.chartTitles1}>近一周告警趋势</span>
      </div>
      {data[0] ? <div id="chart1" style={{ width: '100%', height: '15rem', marginTop: '8px' }}></div> : <EmptyData />}
    </div>
  );
}
